<script>
export default {
  name: "EChatNav",
  data() {
    return {
      active: 0,
      icon: {
        active: require('@/assets/image/all/nav-profile-active.png'),
        inactive: require('@/assets/image/all/nav-profile.png'),
      },
    };
  },

  methods: {
    getTabIndexByRoute(route = this.$route) {
      console.log('route.path=', route.path)
      switch (route.path) {
        case '/home/chat':
          return 0;
        case '/home/contacts':
          return 1;
        case '/home/profile':
          return 2;
        case '/home/more':
          return 3;
        default:
          return 0;
      }
    },
    onChangeTabBar(index) {
      const routes = ['/home/chat', '/home/contacts', '/home/profile', '/home/more'];
      this.$router.push(routes[index]);
    }
  },
  created() {
    this.active = this.getTabIndexByRoute();
  },
}
</script>

<template>
  <div class="chat-footer-nav flex-center" >
    <van-tabbar v-model="active" class="" @change="onChangeTabBar">
      <van-tabbar-item :icon="active === 0 ? 'chat' : 'chat-o'">Chats</van-tabbar-item>
      <van-tabbar-item  :icon="active === 1 ? 'friends' : 'friends-o'">Contacts</van-tabbar-item>
<!--      <van-tabbar-item  :icon="active === 2 ? 'contact' : 'contact-o'">Profile</van-tabbar-item>-->
      <van-tabbar-item>
        <span>Profile</span>
        <template #icon="props">
          <img class="nav-icon" :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
<!--      <van-tabbar-item  :icon="active === 3 ? 'weapp-nav' : 'ellipsis'">More</van-tabbar-item>-->
    </van-tabbar>
  </div>
</template>

<style scoped lang="scss">
.chat-footer-nav {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 16px 0;

  .van-tabbar {
    height: 100px !important;
    padding: 10px 20px;
    box-sizing: border-box;
    background: var(--chat-nav-bg) !important;
    box-shadow: 0px -4px 20px rgba(13, 10, 44, 0.06);

    ::v-deep .van-tabbar-item__icon {
      margin-bottom: 12px !important;
      font-size: 24px !important;
    }

    ::v-deep .van-tabbar-item--active {
      background: var(--chat-nav-active-color);
      color: var(--chat-nav-bg) !important;
      border-radius: 15px;
    }

    .van-tabbar-item {
      margin-right: 20px;
      color: var(--chat-nav-color);

      &:last-child {
        margin-right: 0;
      }
    }

    .nav-icon {
      width: 24px;
      height: 24px;
    }
  }
}
</style>